<template>
  <div class="my" v-if="userInfo">
    <div class="baseInfo">
      <div class="container">
        <div class="base_left">
          <van-image
            round
            width="3.5rem"
            height="3.5rem"
            :src="userInfo.avatar"
          />
        </div>

        <div class="base_middle">
          <div class="base_nick">
            {{ userInfo.nickname
            }}<span
              ><img :src="userInfo.vip_icon" alt="" />{{
                userInfo.vip_name
              }}</span
            >
          </div>
          <div class="base_id">ID:{{ userInfo.uid }}</div>
        </div>
        <div class="base_right">
          <van-icon color="white" name="setting-o" />
        </div>
      </div>
    </div>

    <div class="moneyBox">
      <div class="yue">
        <p>我的余额</p>
        <p>{{ userInfo.now_money }}</p>
      </div>
      <div class="commission">
        <p>当前佣金</p>
        <p>{{ userInfo.commissionCount }}</p>
      </div>
      <div class="spread">
        <p>优惠券</p>
        <p>{{ userInfo.spread_count }}</p>
      </div>
    </div>

    <div class="myorder">
      <router-link to="/order/list/0"
        ><van-cell title="我的订单" is-link value="全部订单"></van-cell
      ></router-link>
      <div class="orderList">
        <div class="order">
          <router-link to="/order/list/0">
            <van-badge :content="userInfo.orderStatusNum.unpaid_count">
              <img
                src=""
                alt=""
              />
            </van-badge>
            <p>待付款</p>
          </router-link>
        </div>

        <div class="order">
          <router-link to="/order/list/1">
            <van-badge :content="userInfo.orderStatusNum.unshipped_count">
              <img
                src=""
                alt=""
              />
            </van-badge>
            <p>待发货</p>
          </router-link>
        </div>

        <div class="order">
          <router-link to="/order/list/2">
            <van-badge :content="userInfo.orderStatusNum.received_count">
              <img
                src=""
                alt=""
              />
            </van-badge>
            <p>待收货</p>
          </router-link>
        </div>

        <div class="order">
          <router-link to="/order/list/3">
            <van-badge :content="userInfo.orderStatusNum.evaluated_count">
              <img
                src=""
                alt=""
              />
            </van-badge>
            <p>待评价</p>
          </router-link>
        </div>

        <div class="order">
          <van-badge :content="userInfo.orderStatusNum.refund_count">
            <img src="../assets/sh.png" alt="" />
          </van-badge>
          <p>售后/退款</p>
        </div>
      </div>
    </div>

    <div class="myserver">
      <van-cell title="我的服务" />
      <div class="serverList">
        <van-grid clickable :column-num="4">
          <van-grid-item
            v-for="(item, index) in serverTitle"
            :key="index"
            :icon="serverImage[index]"
            :text="item.title"
            @click="handler(item.fun)"
          />
        </van-grid>
      </div>
    </div>

    <button @click="loginOut">退出登录</button>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from "vuex";
export default {
  name: "My",
  data() {
    return {
      serverTitle: [
        { title: "会员中心", fun: "huiYuan" },
        { title: "砍价记录", fun: "kanJia" },
        { title: "我的推广", fun: "tuiGuang" },
        { title: "我的余额", fun: "yuE" },
        { title: "地址信息", fun: "diZhi" },
        { title: "我的收藏", fun: "shouCang" },
        { title: "优惠券", fun: "youHui" },
        { title: "联系客服", fun: "keFu" },
      ],
      serverImage: [
        "http://datong.crmeb.net/public/uploads/attach/2019/03/28/5c9ccc9934a7c.png",
        "http://datong.crmeb.net/public/uploads/attach/2019/03/28/5c9ccc9918091.png",
        "http://datong.crmeb.net/public/uploads/attach/2019/03/28/5c9ccc9943575.png",
        "http://datong.crmeb.net/public/uploads/attach/2019/03/28/5c9ccc992db31.png",
        "http://datong.crmeb.net/public/uploads/attach/2019/03/28/5c9ccc99101a8.png",
        "http://datong.crmeb.net/public/uploads/attach/2019/03/28/5c9ccc99269d1.png",
        "http://datong.crmeb.net/public/uploads/attach/2019/03/28/5c9ccc991f394.png",
        "http://kaifa.crmeb.net/uploads/attach/2019/07/20190730/0ded3d3f72d654fb33c8c9f30a268c97.png",
      ],
    };
  },
  props: {},
  created() {
    // this.$axios.get("api/order/list?page=1&limit=20&type=0").then((d) => {
    //   console.log(d);
    // });
    this.getLoginUser()
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    ...mapMutations({
      loginoutbytoken: "loginOut",
    }),
    loginOut() {
      this.loginoutbytoken();
      this.$router.push("/login");
    },
    handler(fun) {
      this[fun]();
    },
    diZhi() {
      this.$router.push("/user/add_manage");
    },
    shouCang() {
      this.$router.push("/collection");
    },
    ...mapActions(["getLoginUser"])
  },
};
</script>

<style lang="less">
.container {
  padding: 0px 1rem;
}
.my {
  // background-color: #f0f0f0;
  padding-bottom: 5rem;
  .baseInfo {
    position: relative;
    background-color: #e93323;
    height: 6rem;
    .container {
      display: flex;
      align-items: center;
      padding-top: 1.2rem;
      .base_left {
        margin-right: 1rem;
        .van-image {
          border: 0.1rem solid white;
        }
      }
      .base_middle {
        color: white;
        .base_nick {
          font-size: 1.1rem;
          span {
            font-size: 0.7rem;
            background-color: rgba(0, 0, 0, 0.25);
            border-radius: 1rem;
            margin-left: 0.5rem;
            padding: 0.2rem 0.4rem;
            letter-spacing: 0.05rem;
            position: relative;
            padding-left: 1.4rem;
            img {
              height: 0.95rem;
              position: absolute;
              left: 0.3rem;
              top: 0.1rem;
            }
          }
        }
        .base_id {
          font-size: 0.85rem;
          color: #f3a29b;
        }
      }
      .base_right {
        margin-left: auto;
        .van-icon-setting-o::before {
          font-size: 1.2rem;
        }
      }
    }
    &::after {
      content: "";
      background-color: #e93323;
      height: 4rem;
      border-radius: 0rem 0rem 50% 50%;
      position: absolute;
      bottom: -4rem;
      width: 100%;
      z-index: -1;
    }
  }
  .moneyBox {
    display: flex;
    background-color: white;
    border-radius: 0.4rem;
    width: 21.5rem;
    margin: 0 auto;
    justify-content: space-around;
    text-align: center;
    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.3);
    .yue p:nth-child(1),
    .commission p:nth-child(1),
    .spread p:nth-child(1) {
      font-size: 0.8rem;
      color: #ababab;
    }
    .yue p:nth-child(2),
    .commission p:nth-child(2),
    .spread p:nth-child(2) {
      font-size: 1.1rem;
      margin-top: -0.2rem;
      letter-spacing: 0.05rem;
      color: #313131;
      margin-bottom: 0.7rem;
    }
    .yue,
    .commission,
    .spread {
      width: 33.33%;
      border-right: 1px solid #dbdbdb;
    }
    .spread {
      border-right: none;
    }
  }
  .myorder {
    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.3);
    width: 21.5rem;
    margin: 0.8rem auto;
    border-radius: 0.4rem;
    .van-cell {
      border-bottom: 1px solid #dbdbdb;
    }
    .orderList {
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding-top: 0.9rem;
      .order {
        a{
          color: black;
        }
        width: 20%;
        img {
          height: 1.5rem;
        }
        p {
          font-size: 0.7rem;
          margin-top: 0.3rem;
        }
      }
    }
  }
  .myserver {
    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.3);
    width: 21.5rem;
    margin: 0.8rem auto;
    border-radius: 0.4rem;
    .van-cell {
      border-bottom: 1px solid #dbdbdb;
    }
    .serverList {
      .van-grid-item__text {
        font-size: 0.7rem;
        color: black;
      }
    }
  }
  button {
    width: 21.5rem;
    border: 1px solid #e93323;
    background-color: white;
    color: #e93323;
    border-radius: 1rem;
    height: 2.5rem;
    margin-left: calc(~"50% - 10.75rem");
    margin-top: 0.5rem;
  }
  .van-badge {
    background-color: white;
    border: 1px solid #e93323;
    color: #e93323;
  }
}
</style>